<template>
  <div class="gins">
    <div class="parameter-table">
      <h2>参数信息</h2>
      <table>
        <tbody>
        <tr v-for="(row, index) in formattedParameters" :key="index">
          <td v-for="(value, i) in row" :key="i">{{ value }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import './ginseng.css'
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 获取商品参数
const parameters = ref([])
const formattedParameters = ref([])

const route = useRoute()
const productId = ref(route.params.id)  // 获取商品 id

console.log('参数配置', productId.value)

// 请求商品参数
const fetchParameters = async () => {
  try {
    const response = await axios.get(`http://localhost:8080/home/param`, {
      params: { productId: productId.value }  // 根据 productId 获取商品参数
    })

    if (response.data.status === 200) {
      parameters.value = response.data.data

      // 格式化数据为表格的行列形式
      const formatted = []
      for (let i = 0; i < parameters.value.length; i += 2) {
        const row = []
        row.push(parameters.value[i].categoryname)      // 当前类别名称
        row.push(parameters.value[i].description)      // 当前描述
        if (i + 1 < parameters.value.length) {
          row.push(parameters.value[i + 1].categoryname)  // 下一个类别名称
          row.push(parameters.value[i + 1].description)  // 下一个描述
        }
        formatted.push(row)
      }

      formattedParameters.value = formatted
    } else {
      console.error('接口返回错误', response.data.message)
    }
  } catch (error) {
    console.error('请求商品参数失败', error)
  }
}

// 在组件挂载后请求商品参数
onMounted(() => {
  fetchParameters()
})
</script>
